<template>
	<view class="content">
		<view class="swiper" v-if="goodsImgs.length > 0">
			<swiper class="swiper-box" @change="change" autoplay circular>
				<swiper-item v-for="(item, index) in goodsImgs" :key="index" class="uni-swiper-item">
					<image mode="aspectFit" class="nut-swiper-img" :src="item" @click="showPreview(index)" lazy-load>
					</image>
				</swiper-item>
			</swiper>
			<view class="swiper-dots">{{ current + 1 }}/{{ goodsImgs?.length }}</view>
		</view>
		<uv-skeletons loading :skeleton="skeleton" v-else></uv-skeletons>
		<view class="p-10">
			<view class="cell">
				<view class="between">
					<view class="category">
						¥
						<view class="num">
							{{ app.globalData.type ? goods?.price_market : goods?.price_selling }}
						</view>
						{{ app.globalData.type ? '/起' : '/天起' }}
					</view>
					<!-- <view class="coupon">
								领券
								<view class="round">
									<uv-icon name="arrow-right" color="#FF0000" size="8"></uv-icon>
								</view>
							</view> -->
				</view>
				<view class="tags">
					<view v-for="(bt, bi) in goods?.marks" :key="'tags' + bi" class="tag tagDefault myTag"
						:style="'background-color:' + bt.color">
						{{ bt }}
					</view>
				</view>
				<view class="name">{{ goods?.name }}</view>
				<view class="align-items-center" style="font-size: 10px;">
					<template v-for="item, index in tags" :key="'icon'+index">
						<uv-icon name="checkmark-circle" :color="app.globalData.primaryColor"></uv-icon>
						{{ item }}
					</template>
				</view>
				<!-- <view style="color:#808080bf;font-size:10px;text-align: end;">365天起租·可续租·可随时买断</view> -->
			</view>
			<view class="cell-group">
				<view class="nut-cell" @click="open">
					<view class="cell-title">
						<span>选择 </span>
						<view>
							<text v-for="item, index in goods?.specs" :key="index">{{ index == 0 ? item.name : '/' +
								item.name }}</text>
						</view>
					</view>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
				<view class="nut-cell">
					<view class="cell-title">
						<span>发货 </span>
						<view>48小时发货/顺丰快递/归还自付</view>
					</view>
				</view>
				<!-- <view class="nut-cell" @click="toMapList">
					<view class="cell-title">
						<span>自提 </span>
						<view>查看服务网点</view>
					</view>
					<uv-icon name="arrow-right"></uv-icon>
				</view> -->
			</view>
			<view class="tabs">
				<view class="box">
					<uv-tabs :list="tabsList" :current="tabsIndex" keyName="title" :scrollable="false"
						:lineColor="app.globalData.primaryColor" @change="tabsChange"
						:activeStyle="activeStyle"></uv-tabs>
				</view>
				<image v-for="item, index in tabsList[tabsIndex]?.urls" :key="index" mode="widthFix" :src="item"
					class="w-full" lazy-load />
			</view>
		</view>
		<view class="btn">
			<view class="left" @click="toIndex">
				<uv-icon name="home" :color="app.globalData.primaryColor" size="25"></uv-icon>
			</view>
			<view class="right">
				<uv-button :text="app.globalData.type ? '购买' : '立即下单'" @click="open" shape="circle"
					:color="app.globalData.primaryColor"></uv-button>
			</view>
		</view>
		<Preview ref="previewRef" />
		<goodsPopup ref="goodsPopupRef" @showPreview="showPreview" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import goodsPopup from '../../components/goodsPopup/goodsPopup';

	const app = getApp()
	const current = ref(0)
	const change = function(e) {
		current.value = e.detail.current;
	}
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const tags = ref(['顺丰快递', '极速审核', '现货速发', '国行正品'])
	const tabs = ref(app.globalData.type ? [{
		title: "商品详情",
		name: 'goodsdetail_images',
		urls: [],
	}, {
		title: "下单须知",
		name: '',
		urls: [],
	}, ] : [{
		title: "商品详情",
		name: 'goodsdetail_images',
		urls: [],
	}, {
		title: "下单须知",
		name: '',
		urls: [],
	}, {
		title: "租赁说明",
		name: 'shuoming_images',
		urls: [],
	}, {
		title: "损坏赔偿",
		name: 'question_images',
		urls: [],
	}])
	const tabsIndex = ref(0)
	const tabsList = ref([])
	const goods = ref({})
	const goodsImgs = ref([])
	const activeStyle = {
		color: '#303133',
		fontWeight: 'bold',
		transform: 'scale(1.05)'
	}
	const goodsImg = ['/static/img/goodsImg1.jpg', '/static/img/goodsImg2.jpg']
	const skeleton = [{
		type: 'line',
		style: 'height: 300px;',
	}]
	onLoad((e) => {
		console.log(e);
		if (!e.code) {
			uni.switchTab({
				url: '/pages/index/index',
			})
		}
		uni.pageScrollTo({
			scrollTop: 0
		})
		getData(e.code)
		// const eventChannel = proxy.getOpenerEventChannel();
		// // 监听getGoods事件，获取上一页面通过eventChannel传送到当前页面的数据
		// eventChannel.on('getGoods', (value) => {
		// 	console.log(value)
		// })
	})
	const getData = (code) => {
		app.get('api.goods/getGoodsFind', {
			code
		}).then(res => {
			const list = res.list[0]
			goods.value = list
			goodsImgs.value = list.slider.concat(goodsImg)
			let tabList = []
			tabs.value.forEach((item, index) => {
				if (list[item.name]?.length > 0) {
					item.urls = list[item.name]
					tabList.push(item)
				} else {
					item.urls = ['/static/img/xdxz.jpg']
					tabList.push(item)
				}
			})
			tabsList.value = tabList
		}).catch(error => {
			console.log(error);
		})
	}
	const tabsChange = (value) => {
		tabsIndex.value = value.index
		app.vibrate()
	}
	const toMapList = () => {
		app.vibrate()
		uni.navigateTo({
			url: '/pages/mapList/mapList'
		})
	}
	const previewRef = ref(null)
	const showPreview = (index, value = goodsImgs.value) => {
		previewRef.value.open(value, index)
	}
	const goodsPopupRef = ref(null)
	const open = () => {
		app.vibrate()
		goodsPopupRef.value.open(goods.value)
	}
	const toIndex = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.btn {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		gap: 10px;

		.left {
			width: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.right {
			width: -webkit-fill-available;
		}
	}

	.swiper {
		position: relative;
	}

	.uni-swiper__warp,
	.swiper-box {
		width: 100%;
		height: 300px;
	}

	.swiper-dots {
		background-color: whitesmoke;
		position: absolute;
		bottom: 0;
		right: 0;
		border-radius: 50px 0 0;
		padding: 0 20px;
		font-size: 16px;
		z-index: 2;
	}

	.uni-swiper-item {
		background-color: white;
	}

	::v-deep {

		nut-swiper,
		.nut-swiper,
		.nut-swiper-inner {
			width: 100% !important;
			height: 100% !important;
			position: absolute;
		}
	}

	.nut-swiper-img {
		width: 100%;
		height: 100%;
		//transform: scale(0.9);
		border-radius: $uni-border-radius-lg;
	}

	.cell-group {
		display: inherit;
		margin: 10px 0;
		overflow: hidden;
		background-color: var(--nut-cell-group-background-color, var(--nut-white, #fff));
		border-radius: var(--nut-cell-border-radius, 6px);
		box-shadow: var(--nut-cell-box-shadow, 0 1px 7px 0 rgb(237, 238, 241));
	}

	.nut-cell {
		display: flex;
		box-shadow: none;
		padding: 10px;
		width: -webkit-fill-available;
	}

	.nut-cell:active {
		background-color: #d9d9d9;
	}

	.cell-title {
		width: 100%;
		font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 14px));
		line-height: var(--nut-cell-line-height, 20px);
		color: var(--nut-cell-color, var(--nut-title-color2, #666));
	}

	.cell {
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 5px;
		border-radius: $uni-border-radius-lg;
		background-color: white;
		width: -webkit-fill-available;

		::v-deep .nut-cell {
			padding: 0 10px;
		}
	}

	.coupon {
		background-color: red;
		color: white;
		display: flex;
		border-radius: 20px;
		padding: 2px 4px;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		gap: 2px;
		margin-right: 10px;

		.round {
			border-radius: 100%;
			background-color: white;
			width: 10px;
			height: 10px;
			color: red;
			text-align: center;
			font-size: 11px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.box {
		border-radius: 10px 10px 0 0;
	}

	.br {
		border-radius: 8px;
		background-color: white;
	}

	.ant-container-content {
		padding: 10px;
	}

	.container {
		margin-bottom: 0;
	}

	.container .ant-container-content {
		padding: 0px 10px;
	}

	.container .ant-container-header-title {
		height: 40px;
	}

	.m-10 {
		margin: 10px;
	}

	.ant-grid {
		padding: 10px 0;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		/* gap:8px; */
	}


	.flex {
		display: flex;
		justify-content: flex-start;
		gap: 10px;
	}

	.align-items-center {
		align-items: center;
		display: flex;
		gap: 2px;
	}

	.flex .ant-avatar-image-medium {
		transform: scale(1.2);
	}

	.column {
		display: flex;
		flex-direction: column;
		width: -webkit-fill-available;
		padding: 0 10px;
	}

	.gap-10 {
		gap: 10px;
	}

	.price {
		color: red;
		font-size: 14px;
		margin-top: 10px;
	}

	.price .num {
		font-size: large;
		font-weight: bolder;
	}

	.center {
		display: flex;
		justify-content: center;
	}

	.between {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.category {
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 600;
		margin-top: 7px;
		color: red;
		display: flex;
		align-items: baseline;
	}

	.category .num {
		font-size: 20px;
		font-weight: 900;
		line-height: 2px;
		margin: 2px;
	}

	.category:hover {
		cursor: pointer;
	}

	.tags {
		display: flex;
		gap: 10px;
	}

	.tag {
		display: inline-flex;
		align-items: center;
		height: var(--nut-tag-height, auto);
		padding: 0 4px;
		font-size: var(--nut-tag-font-size, 12px);
		border-radius: var(--nut-tag-default-border-radius, 4px);
		border: var(--nut-tag-border-width, 1px) solid transparent;
	}

	.tagDefault {
		color: var(--nut-tag-default-color, #fff);
		background: var(--nut-tag-default-background-color, #000);
		border: var(--nut-tag-border-width, 1px) solid transparent;
	}

	.name {
		font-size: 16px;
		font-weight: 500;
	}

	.cell-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10%;
	}

	.tabs {
		margin-bottom: 20%;
		padding-bottom: env(safe-area-inset-bottom);

		::v-deep.nut-tabs {
			.nut-tabs__titles {
				border-radius: 10px 10px 0 0;
			}

			.nut-tab-pane {
				padding: 0;
			}
		}
	}
</style>